<template>
  <div class="behavior-container">
    <van-nav-bar
      v-isstudent
      title="请假"
      right-text="添加"
      right-arrow
      fixed
      @click-right="$router.push('/leave/add')"
    />
    <van-nav-bar v-isteacher title="请假" fixed />

    <div
      v-isteacher
      class="card"
      style="text-align: center; background-color: floralwhite"
    >
      目前待审批剩余：{{ countNum }} 个
    </div>

    <van-empty v-if="list.length === 0" description="没有数据"> </van-empty>

    <div
      class="card"
      v-for="item in list"
      :key="item"
      :title="item.name"
      @click="showInfo(item)"
    >
      <div :class="{ green: item.status == '审批通过' }">
        <div><label>学生姓名：</label>{{ item.studentName }}</div>
        <div><label>班级名称：</label>{{ item.className }}</div>
        <div><label>请假类型：</label>{{ item.type }}</div>
        <div>
          <label>请假时间：</label>{{ item.startDate }} ~ {{ item.endDate }}
        </div>
        <div><label>请假内容：</label>{{ item.content }}</div>
        <div><label>请假状态：</label>{{ item.status }}</div>
        <div><label>提交时间：</label>{{ item.createDate }}</div>
      </div>
      <div v-isteacher style="text-align: right" v-if="item.status == '待审批'">
        <van-button
          size="small"
          hairline
          type="success"
          @click="pass(item, 1)"
          v-if="item.status == '待审批'"
          >通过</van-button
        >
        &nbsp;
        <van-button
          size="small"
          hairline
          type="danger"
          @click="pass(item, 2)"
          v-if="item.status == '待审批'"
          >不通过</van-button
        >
      </div>
    </div>

    <van-pagination
      v-model="pageNum"
      :total-items="total"
      :items-per-page="pageSize"
      @change="pageQuery"
    />
  </div>
</template>
<style scoped>
.behavior-container {
  padding-top: 50px;
  padding-bottom: 50px;
}

.card {
  border: 1px solid #ccc;
  border-radius: 1em;
  padding: 0.5em 1em;
  margin-bottom: 1em;
}

.green {
  background-color: honeydew;
}
</style>
<script setup>
import { ref } from "vue";
import request from "@/utils/request";
import { showConfirmDialog, showNotify } from "vant";
//import { useRouter } from "vue-router";

//const router = useRouter();
const list = ref([]);

let pageNum = 1;
let pageSize = 5;
let total = 100;
let countNum = 0;

const onLoad = () => {
  let type = localStorage.getItem("type");
  if (type == "学生") {
    // 异步更新数据
    request
      .post(`/wx/student/leave/list?pageNum=${pageNum}&pageSize=${pageSize}`)
      .then((resp) => {
        if (resp.data.code == 0) {
          list.value = resp.data.rows;
          total = resp.data.total;
        }
      });
  } else {
    // 异步更新数据
    request
      .post(`/wx/teacher/leave/list?pageNum=${pageNum}&pageSize=${pageSize}`)
      .then((resp) => {
        if (resp.data.code == 0) {
          list.value = resp.data.rows;
          total = resp.data.total;
        }
      });
    request.post(`/wx/teacher/leave/count`).then((resp) => {
      if (resp.data.code == 0) {
        countNum = resp.data.data;
      }
    });
  }
};

const pass = (item, status) => {
  showConfirmDialog({
    title: "请确认审批操作",
  })
    .then(() => {
      request
        .post("/wx/teacher/leave/pass", { id: item.id, status: status })
        .then((resp) => {
          if (resp.data.code == 0) {
            location.reload();
            //router.push('/leave')
            showNotify({ type: "success", message: "操作成功" });
          }
        });
    })
    .catch(() => {
      showNotify({ type: "danger", message: "操作取消" });
    });
};

const showInfo = (item) => {
  if (item.status != "审批通过") {
    return;
  }
  showConfirmDialog({
    title: `辅导员：${item.adviser} ${item.status}`,
    allowHtml: true,
    messageAlign: "left",
    message: `学生姓名：${item.studentName} \n学生班级：${item.className} \n请假类型：${item.type} \n请假内容：${item.content} \n请假时间：${item.startDate} ~ ${item.endDate}`,
    showCancelButton: false,
    className: "passClass",
  })
    .then(() => {})
    .catch(() => {});
};

onLoad();

function pageQuery(item) {
  pageNum = item;
  onLoad();
}
</script>


<style>
.passClass {
  color: red !important;
}

.van-dialog__header {
  color: red !important;
}
</style>